<template>
  <div class="SF_item">
    <div class="query">
      任务名称：
      <el-input
        placeholder="请输入内容"
        v-model="query.name"
        size="small"
        style="width: 300px"
      >
        <el-button
          slot="append"
          icon="el-icon-search"
          type="teal"
          size="small"
          style="
            color: #fff;
            background-color: teal;
            border-color: teal;
            font-weight: 900;
          "
        ></el-button>
      </el-input>
      <el-button size="small" @click="fh" style="float: right;margin-left: 10px;"
        >返回</el-button
      >
      <el-button size="small" type="teal" style="float: right"
        >新建随访任务</el-button
      >
      
    </div>
    <div class="main">
      <ul>
        <li class="li_item">
          <p>
            <span class="fw900">糖尿病长期随访任务</span>
            <span class="fr">类型：Ⅱ类</span>
          </p>
          <p>任务状态<span class="txt_c">进行中</span></p>
          <p>
            糖尿病长期随访任务
            <span class="fr"
              ><el-button size="small" type="teal" @click="to_info">查看</el-button
              ><el-button size="small" type="teal">禁用</el-button
              ><el-button size="small" type="teal" @click="to_info">操作</el-button></span
            >
          </p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      query: {},
    };
  },
  methods: {
    to_info(){
        this.$router.push('/SF/info')
    },
    fh(){
        this.$router.push('/SF/home')
    }
  },
};
</script>

<style lang="scss" scope>
.SF_item {
  padding: 15px;
  .query {
    background-color: #eee;
    padding: 10px;
  }
  .main {
    background-color: #fff;
    .li_item {
      display: inline-block;
      width: 45%;
      padding: 15px;
      border: 1px solid teal;
      margin: 8px;
      border-radius: 5px;

      .fw900 {
        font-weight: 700;
        color: #000;
        font-size: 20px;
      }
      .txt_c {
        color: teal;
        font-weight: 700;
        margin-left: 10px;
      }
      .mr_10 {
        display: inline-block;
        margin-right: 10px;
      }
      .fr {
        float: right;
      }
    }
  }
}
.el-button--teal {
  color: #fff;
  background-color: teal;
  border-color: teal;
  font-weight: 900;
}
</style>